<template>
  <div class="upload-image">
    <div class="preview" @click="centerDialogVisible=true">
      
      <!-- :src="coverImage" 这个与属性设置的 this.$refs['cover-image'].src冲突了 所以不能一起使用 -->
      <!-- <img class="img-pre" ref="cover-image" :src="coverImage" /> -->
      <!-- <img class="img-pre" ref="cover-image" :src="coverImage" /> -->

<!-- 使用v-model简写后 -->
      <img v-if="value" class="img-pre" ref="cover-image" :src="value" />
      <i v-else class="el-icon-plus avatar-uploader-icon"> 
      </i>
     
    </div>
    <!--
      visible 控制对话框的显示和隐藏
     -->
    <el-dialog
      title="请选择文章封面图片"
      :visible.sync="centerDialogVisible"
      width="30%"
      append-to-body
      center
    >
       <el-tabs v-model="activeName" type="card" >
    <el-tab-pane label="素材库" name="first">
     <image-manage 
     ref="image-list"
     :is-show="false"
     is-selected
      />
     <!-- ref 的两个作用
     1、作用到普通的HTML组件上可以获取DOM
     2、作用到组件上可以获取组件
      -->
    </el-tab-pane>
    <el-tab-pane label="上传图片" name="second"> 
      <input type="file" ref="file" @change="onFileChange">
      图片上传
      <img  ref="preview-img"  alt="" /></el-tab-pane>
  
  </el-tabs>
      <!-- /标签导航 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false"
         >取 消</el-button>
        <el-button  @click="onCoverConfirm" >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import imageManage from '@/views/image/component/index.vue'
import { uploadImage } from "@/api/image.js";
  export default {
    name: "UploadImage",
    components: {
      imageManage
    },
    //  props: ['cover-image'],
    // 使用 v-model简写
     props: ['value'],
    data() {
      return {
        centerDialogVisible: false,
        activeName: 'first',
        imageUrl:null
      };
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
       handleClick(tab, event) {
        // console.log(tab, event);
      },
      onFileChange(){
        //获取文件对象
        const file = this.$refs.file.files[0]
        
      //图片预览
      const blob = window.URL.createObjectURL(file)
      this.$refs['preview-img'].src = blob

        //防止选择重复的图片出现不更新
        // this.$refs.file.files[0].value = ''
      },
      onCoverConfirm(){
        if(this.activeName === 'second'){
          const file =this.$refs.file.files[0]
          if(!file){
            this.$message('请选择要上传的图片')
            return
          }
          //执行上传文件的操作
          const fd = new FormData()
          fd.append('image',file)
          uploadImage(fd).then((res) => {
            console.log(res);

            //关闭弹出层 
            this.centerDialogVisible = false

            //给到预览
            // this.$refs['cover-image'].src= res.data.data.url


            //父子组件通信 把地址传给父组件     这个页面是子组件啊！！
            //通过事件 update-cover 
            //  在父组件里面直接定义@update-cover="事件名称" \
            // methods定义：事件名称(子传父的参数){ console.log(参数)}
            //就能拿到 子组件传递过去的默认参数了
            // this.$emit('update-cover',res.data.data.url)


          //  使用v-model简写后
            this.$emit('input',res.data.data.url)
          })
        }else if(this.activeName==='first'){
          //还有一种组件通信方式：父组件可以直接访问子组件的数据 但是不要修改
       //这里拿到的image-list是组件的this
       const imageList = this.$refs['image-list']
        const selected = imageList.selected
        if(selected === null){
          this.$message('请选择封面')
          return
        }

        //关闭对话框
        this.centerDialogVisible = false
        //修该父组件  //这个功能就是通过选择图片进行预览
        this.$emit('input',imageList.images[selected].url)
        }
      }
    }
  };
</script>

<style scoped>
  .upload-image {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
     height: 178px;
    width: 178px;
    display: flex;
    flex-direction: row;
  }

  .upload-image .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .img-pre{
    width: 100%;
    height: 100%;
  }
  

</style>